.custom-checkbox-cintainer {
  display: inline-block;
  .custom-checkbox-box {
    .custom-label {
      display: flex;
      align-items: center;
      // 复选框样式
      .custom-checkbox {
        margin-left: 10rpx;
      }
      // 文字处于左侧的类名
      &.left {
        flex-direction: row-reverse; // 反转
      }
      // 文字处于右侧的类名
      &.right {
        flex-direction: row;
      }
      .contnet {
        font-size: 25rpx;
      }
      // 设置复选框组件样式
      /* 复选框是公共组件，以后需要在多个页面或需要在多个项目中进行使用，所有需要先给复选框组件准备，设置一些默认样式，如果在其他页面或其他项目中使用时，发现样式不符合需求，可以对默认样式进行修改 */
      // 1.需要给复选框设置默认样式
      // 不能直接修改复选框样式，需要先找到小程序给复选框提供的类名，通过提供的类名进行修改，需要打开小程序开发文档，找到复选框文档，审查元素，进行查找
      // 在自定义组件中，不能直接修改复选框样式，可以在页面组件，app.scss中进行修改，或在自定义组件js文件中设置options:{styleIsolation:"shared",},但会修改其他页面的样式，组件使用者的样式，以及其他使用了shared以及apply-shared属性的组件，这时候不是想要的结果，需求是：只影响当前组件，可以添加命名空间
      // 复选框没被选中的默认样式
      // .custom-checkbox .wx-checkbox-input {
      //   width: 24rpx;
      //   height: 24rpx;
      //   border-radius: 50%;
      //   border: 1px solid #fda007;
      //   margin-top: -6rpx;
      // }
      // // 复选框选中时的样式
      // .custom-checkbox .wx-checkbox-input-checked {
      //   background-color: #fda007;
      // }
      // // 复选框选中时 √ 的样式
      // .custom-checkbox .wx-checkbox-input.wx-checkbox-input-checked:before {
      //   font-size: 22rpx;
      //   color: #ffffff;
      // }
      // 2.组件使用者也能修改默认样式
    }
  }
}
